<template>
	<div class="sos-button"><strong @click="goToSOSPage">SOS</strong></div>
	<div class="body">
		<div class="top">
			<input type="text" placeholder="请输入搜索内容" />
			<p>您今天的陪伴对孩子意义重大</p>
		</div>
		<swiper class="banner" indicator-dots indicator-active-color='#0066ff' circular autoplay interval="5000"
			duration="500">
			<swiper-item v-for="item in pictures" :key="item.id">
				<image :src="item.url"></image>
			</swiper-item>
		</swiper>
		<div class="center">
			<p class="recommendP">今日推荐训练</p>
			<div class="recommend">
				<div class="training">语言训练</div>
				<div class="training">社交游戏</div>
				<div class="training">感官要训练</div>
				<div class="training">4</div>
				<div class="training">5</div>
				<div class="training">6</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	function goToSOSPage() {
		uni.navigateTo({
			url: '/pages/SOS/SOS'
		});
	}

	let pictures = ref([{
			id: 1,
			url: '/static/img/1.png'
		},
		{
			id: 2,
			url: '/static/img/2.png'
		},
		{
			id: 3,
			url: '/static/img/3.png'
		},
		{
			id: 4,
			url: '/static/img/4.png'
		},
		{
			id: 5,
			url: '/static/img/5.png'
		}
	])
</script>

<style>
	.body {
		width: 90vw;
		height: 90vh;
		margin: auto;

	}

	.banner {
		margin-top: 10px;
		width: 100%;
		height: 25%;
	}

	.banner image {
		width: 100%;
		height: 100%;
		border-radius: 20px;
	}

	.top {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top input {
		margin-top: 15px;
		margin-bottom: 10px;
		width: 100%;
		height: 35px;
		border: 2px solid black;
		border-radius: 10px;
		text-align: center;
	}

	.center {
		width: 100%;
		margin-top: 20px;
	}

	.recommendP {
		margin-left: 50px;
	}

	.training {
		margin-top: 15px;
		margin-left: 15px;
		width: 90%;
		height: 100px;
		border: 2px solid #707070;
		border-radius: 10px;
		text-align: center;
		line-height: 100px;
	}

	.recommend {
		width: 100%;
		height: 59vh;
		overflow-y: auto;
	}

	.sos-button {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 60px;
		height: 60px;
		background-color: red;
		color: white;
		border: none;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		z-index: 1000;
		text-align: center;
		line-height: 60px;
	}
</style>